<template>
  <a-modal v-bind:visible="isShowRate" width="60%" title="费率" :footer="false" @cancel="onCancel">
    <a-spin :spinning="loading">
      <a-table :rowKey="(record, index) => index" :columns="columns" :data-source="tableData">
        <span slot="level_base_rate" slot-scope="text, record">
          <span>
            <a-input
              style="width: 100px"
              v-model="record.trade_rate"
              @blur="confirm(record.channel_id, record.trade_rate, record.trade_fee)"
              size="small"
            ></a-input>
          </span>
        </span>
        <span slot="level_base_fee" slot-scope="text, record">
          <span>
            <a-input
              style="width: 100px"
              v-model="record.trade_fee"
              @blur="confirm(record.channel_id, record.trade_rate, record.trade_fee)"
              size="small"
            ></a-input>
          </span>
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { getRateListAPI, editRateAPI } from '@/api/userinfo.js'
export default {
  name: 'ViewRate',
  watch: {
    async isShowRate(boo) {
      if (boo) {
        try {
          this.loading = true
          this.getList()
          console.log(this.tableData)
        } finally {
          this.loading = false
        }
      }
    }
  },
  props: {
    isShowRate: {
      type: Boolean,
      default: false
    },
    viewId: {
      type: Number,
      default: undefined
    }
  },

  data() {
    return {
      loading: false,
      columns: [
        {
          title: '类型',
          dataIndex: 'type_name',
          align: 'center'
        },
        {
          title: '通道名称',
          dataIndex: 'channel_name',
          align: 'center'
        },
        {
          title: '费率',
          align: 'center',
          scopedSlots: { customRender: 'level_base_rate' }
        },
        {
          title: '等级费率',
          dataIndex: 'level_base_rate',
          align: 'center'
        },
        {
          title: '品牌费率',
          dataIndex: 'brand_base_rate',
          align: 'center'
        },
        {
          title: '笔数费',
          align: 'center',
          scopedSlots: { customRender: 'level_base_fee' }
        },
        {
          title: '等级笔数费',
          dataIndex: 'level_base_fee',
          align: 'center'
        },
        {
          title: '品牌笔数费',
          dataIndex: 'brand_base_fee',
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  methods: {
    async getList() {
      const { data } = await getRateListAPI({ user_id: this.viewId, brand_id: process.env.VUE_APP_BRAND_ID })
      this.tableData = data.list
    },
    onCancel() {
      this.$emit('update:isShowRate', false)
      this.$emit('update:viewId', undefined)
    },
    async confirm(id, rate, fee) {
      console.log(rate, fee)
      if (!rate) return this.$message.warn('请输入费率')
      if (!fee) return this.$message.warn('请输入笔数费')
      const form = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        channel_id: id,
        trade_fee: fee,
        trade_rate: rate,
        user_id: this.viewId
      }
      try {
        await editRateAPI(form)
        this.getList()
        this.this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
